<script setup lang="ts">
import { onMounted } from "vue";
// import { useRouter } from "vue-router";
import { Images } from "@/constants/images";
const props = withDefaults(
    defineProps<{
        title: string,
        subtitle: string,
        instruction: string,
        content: string,
        btnClick: any
    }>(),
    {
        title: "",
        subtitle: "",
        instruction: "",
        content: "",
    }
);
onMounted(() => {
});
</script>

<template>


    <div :style="{
        backgroundImage: `url(${Images.BG})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
        height: '100vh',
        width: '100vw'
    }">
        <div class="container is-widescreen">
            <div class="left-content">
                <img :src="Images.LOGO" class="site-logo" />
            </div>
            <div class="right-content">
                <div>
                    <div class="content-title">{{ props.title }}</div>
                    <div class="content-subtitle">{{ props.subtitle }}</div>
                    <div class="instruction">{{ props.instruction }}</div>
                    <div class="content">{{ props.content }}</div>
                </div>
                <button class="button is-small is-primary" @click="props.btnClick">
                    开始测试
                </button>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    color: #fff;
    display: flex;
    padding: 60px 0;
    height: 100%;

    .left-content {
        width: 28%;
        padding-top: 15px;

        .site-logo {
            height: 60px;
        }

    }

    .right-content {
        width: 72%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .content-title {
            font-weight: 800;
            font-size: 90px;
            line-height: 1;
        }

        .content-subtitle {
            margin-top: 10px;
            font-weight: 400;
            font-size: 50px;
        }

        .instruction {
            margin-top: 40px;
            font-weight: 400;
            font-size: 40px;
        }

        .content {
            margin-top: 16px;
            font-weight: 400;
            font-size: 30px;
            color: rgba(255, 255, 255, 0.9);
        }

        .button {
            width: 100%;
            border-radius: 30px;
            height: 110px;
            font-weight: 800;
            font-size: 30px;
            margin-top: 60px;
        }
    }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        padding: 30px 25px;

        .left-content {
            .site-logo {
                height: 24px;
            }
        }

        .right-content {
            width: 100%;

            .content-title {
                font-weight: 800;
                font-size: 24px;
                line-height: 32px;
            }

            .content-subtitle {
                font-weight: 400;
                font-size: 18px;
                line-height: 25px;
            }

            .instruction {
                font-weight: bold;
                font-size: 16px;
                line-height: 22px;
            }

            .content {
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
            }

            .button {
                position: fixed;
                bottom: 40px;
                width: 212px;
                height: 44px;
                border-radius: 22px;
                font-weight: 500;
                font-size: 14px;
                line-height: 18px;
                left: 50%;
                margin-left: -106px;
            }
        }

    }

}
</style>
